<template>
  <el-menu class="el-menu-vertical" router>
    <div class="user-box">
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        style="margin-left: 30px;"></el-avatar>
      <div class="userInfo">
        <div class="username">
          {{ name }}
        </div>
        <div class="op" @click="logout">退出</div>
      </div>
    </div>

    <el-menu-item index="index">
      <i class="el-icon-s-home"></i>
      <span slot="title">预约</span>
    </el-menu-item>

    <el-menu-item index="user">
      <i class="el-icon-s-home"></i>
      <span slot="title">用户管理</span>
    </el-menu-item>

  </el-menu>
</template>

<script>
export default {
  name: 'NaviPage',
  data() {
    return {
      name: '',
      role: ''
    }
  },
  created() {
    this.name = localStorage.getItem("name")
    this.role = localStorage.getItem("role")
  },
  methods: {
    logout() {
      this.$confirm('确认要退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.clear()
        this.$router.push('/')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  }
}
</script>

<style scoped>
.el-menu-vertical {
  height: 100%;
  width: 199px;
}

.user-box {
  width: 200px;
  height: 100px;
  background-color: #164C85;
  display: flex;
  align-items: center;
}

.userInfo {
  margin-left: 20px;
}

.username {
  font-weight: 600;
  color: white;
}

.op {
  font-size: 13px;
  cursor: pointer;
  color: darkgray;
}
</style>
